<style>
    .el-scrollbar__wrap {
        margin-bottom: 0 !important;
    }
</style>
<script src="/component/element/elementchoose/public/static/js/cascader.js"></script>
<div class="">
    <div class="" style="padding-bottom: 10px;">
        <div style="font-weight: 600;margin-bottom:15px">选择元素</div>
        <div>
            <input type="text" id="<?php echo $id ?? $name ?>" name="<?php echo $name ?>" lay-verify="required" autocomplete="off" class="layui-input" submit_before="getdata_<?php echo $name ?>">

        </div>
    </div>

    <div class="" id="sourcediv" style="display: none;">
        <div style="font-weight: 600;margin-bottom:15px;margin-top:15px">数据源</div>
        <div>
            <div class="layui-row layui-col-space5" id="datadicbox" style="margin-bottom: 15px;">


                <div class="layui-tab layui-tab-brief" lay-filter="sourcetab">

                    <ul class="layui-tab-title">
                        <li class="layui-this" lay-id="zd">从数据字典中选择</li>
                        <li class="layui-this" lay-id="cus">自定义数据</li>
                    </ul>

                    <div class="layui-tab-content">

                        <div class="layui-tab-item layui-show">

                            <?php
                            foreach ($dicts as $key => $dict) {
                            ?>
                                <div class="layui-col-md3">
                                    <div class="">
                                        <input class="check" lay-filter="filter_<?php echo $name; ?>" name="<?php echo $name ?>_source" type="radio" value="<?php echo $dict['id'] ?>" title="<?php echo $dict['title'] ?>" />
                                    </div>
                                </div>
                            <?php
                            }
                            ?>

                        </div>


                        <div class="layui-tab-item">
                            <textarea class="layui-textarea" id="<?php echo $name ?>_customsource" placeholder="请输入自定义数据，每个数据占一行,实际值和显示值用|隔开。如：1|男"></textarea>
                        </div>


                    </div>






                </div>
            </div>
        </div>
    </div>
    <!-- 元素title -->
    <input type="hidden" id="<?php echo $name ?>_title" name="<?php echo $name ?>_title" />
    <!-- 元素name -->
    <input type="hidden" id="<?php echo $name ?>_ident" name="<?php echo $name ?>_ident" />
    <!-- 元素多态值 -->
    <input type="hidden" id="<?php echo $name ?>_polymorphic" name="<?php echo $name ?>_polymorphic" />

    <!-- 数据源ID和 -->
    <input type="hidden" id="<?php echo $name ?>_sourcetype" name="<?php echo $name ?>_sourcetype" value="0" />
    <input type="hidden" id="<?php echo $name ?>_source" name="<?php echo $name ?>_source" value="" />
    <input type="hidden" id="<?php echo $name ?>_source_title" name="<?php echo $name ?>_source_title" value="" />
</div>


<script>
    layui.use(function() {
        var form = layui.form;
        var element = layui.element;
        var layCascader = layui.layCascader;
        var el_cascaderdata_<?php echo $name ?> = '<?php echo $elements ?>';
        var el_cascaderdata_<?php echo $name ?>_obj = eval("(" + el_cascaderdata_<?php echo $name ?> + ")");
        var layCascader_<?php echo $name ?> = layui.layCascader;
        var el_cascader_<?php echo $name ?> = layCascader({
            elem: '#<?php echo $id ?? $name ?>',
            filterable: true,
            options: el_cascaderdata_<?php echo $name ?>_obj,
            props: {
                value: 'ident',
                label: 'title',
            }
        });

        el_cascader_<?php echo $name ?>.changeEvent(function(value, node) {

            if (node.parentNode != null) {
                $('#<?php echo $name ?>_title').val(node.parentNode.data.title + ' / ' + node.data.title);
                $('#<?php echo $name ?>_ident').val(node.parentNode.data.ident);
                $('#<?php echo $name ?>_polymorphic').val(node.data.id.split('_')[1]);
            } else {
                $('#<?php echo $name ?>_title').val(node.data.title);
                $('#<?php echo $name ?>_ident').val(node.data.ident);
                $('#<?php echo $name ?>_polymorphic').val('');
            }
            if (node.data.source != 0) {
                element.tabChange('sourcetab', 'zd');
                $('#<?php echo $name ?>_sourcetype').val(1);
                $(".check").each(function(index, el) {
                    el.checked = false;
                })
                form.render('radio');
                $('#sourcediv').show();
            } else {
                $('#<?php echo $name ?>_sourcetype').val(0);
                $('#<?php echo $name ?>_source').val(0);
                $('#<?php echo $name ?>_source_title').val('');
                $('#sourcediv').hide();
            }
        });


        // tab 切换事件
        var tabindex = 0;
        element.on('tab(sourcetab)', function(data) {

            $('#<?php echo $name ?>_sourcetype').val(parseInt(data.index) + 1);
            $('#<?php echo $name ?>_source').val('');
            $('#<?php echo $name ?>_source_title').val('');

            tabindex = data.index; // 得到当前 tab 项的所在下标

            if (tabindex == 1) {
                $('#<?php echo $name ?>_source').val($('#<?php echo $name ?>_customsource').val());
                $('#<?php echo $name ?>_source_title').val('自定义数据源');
            }

            $('#<?php echo $name ?>_sourcetype').val(tabindex);

        });

        //设置自定义数据源
        $('#<?php echo $name ?>_customsource').keyup('input', function() {
            $('#<?php echo $name ?>_source').val($(this).val());
            $('#<?php echo $name ?>_source_title').val('自定义数据源');
        });



        form.on('radio(filter_<?php echo $name ?>)', function(data) {
            var elem = data.elem; // 获得 radio 原始 DOM 对象
            var value = elem.value; // 获得 radio 值
            $('#<?php echo $name ?>_source').val(value);
            $('#<?php echo $name ?>_source_title').val($(elem).attr('title'));
        });





        window.setValueSource = function(val, sourcetype, source) {
            if (val != el_cascader_<?php echo $name ?>.getCheckedValues()) {

                el_cascader_<?php echo $name ?>.setValue(val);
                if (typeof(sourcetype) != 'undefined' && sourcetype != '') {
                    $('#<?php echo $name ?>_sourcetype').val(sourcetype);

                    switch (parseInt(sourcetype)) {
                        case 2:
                            element.tabChange('sourcetab', 'cus'); // 切换到：标
                            $('#<?php echo $name ?>_customsource').val(source);
                            break;
                        case 1:
                            element.tabChange('sourcetab', 'zd'); // 切换到：标

                            $('#<?php echo $name ?>_source').val(source);
                            $('input[name="<?php echo $name ?>_source"][value="' + source + '"]').prop('checked', true);
                            $('#<?php echo $name ?>_source_title').val($('input[name="<?php echo $name ?>_source"][value="' + source + '"]').attr('title'));
                            form.render('radio');
                            break;
                    }
                }
            }

        }


    });
</script>